import React, { Component } from 'react'
import { InputItem, Icon, Toast } from 'antd-mobile'
import { createForm } from 'rc-form'
import { config } from '../utils'

class ForgotFormWrapper extends Component {
  constructor() {
    super()
    this.confirm = this.confirm.bind(this)
  }
  render() {
    const { form: { getFieldProps } } = this.props
    return (
      <div className={`cm-scrollable-container`}>
        <InputItem
          placeholder="请输入手机号码"
          className={`cm-input-item`}
          extra={<Icon type="phone" />}
          {...getFieldProps('phoneNumber', {
            initialValue: '',
          })}
        />

        <div className={`cm-captcha-box`}>
          <InputItem
            className={`cm-input-item`}
            placeholder="请输入收到的验证码"
            {...getFieldProps('captcha', {
              initialValue: '',
            })}
          />
          <div className={`cm-cpatch-btn`}>
            获取验证码
          </div>
        </div>

        <InputItem
          placeholder="请输入新密码"
          className={`cm-input-item`}
          {...getFieldProps('password', {
            initialValue: '',
          })}
        />

        <InputItem
          placeholder="请再次输入新密码"
          className={`cm-input-item`}
          {...getFieldProps('passwordConfirmation', {
            initialValue: '',
          })}
        />

        <div className={`cm-main-button`} onClick={this.confirm}>确 认</div>
      </div>
    )
  }
  confirm() {
    const { form: { getFieldValue } } = this.props
    const phoneNumber = getFieldValue('phoneNumber')
    if (!phoneNumber) {
      Toast.fail('请填写手机号码', config.toastInterval)
      return
    }
    const captcha = getFieldValue('captcha')
    if (!captcha) {
      Toast.fail('请填写验证码', config.toastInterval)
      return
    }
    const password = getFieldValue('password')
    if (!password) {
      Toast.fail('请填写新密码', config.toastInterval)
      return
    }
    const passwordConfirmation = getFieldValue('passwordConfirmation')
    if (passwordConfirmation != password) {
      Toast.fail('两次密码需填写一致', config.toastInterval)
      return
    }
    console.log(this.props.form.getFieldsValue())
  }
}

export default createForm()(ForgotFormWrapper)